<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>javascript</title>
    <style>
        #boll{
            width: 100px;
            height: 100px;
            background-color: #317EF3;
            border-radius: 50%;
            position: absolute;
        }
    </style>
</head>
<body>
        <div id="boll" style="left: 200px; top: 0;"></div>
        x:<input type="text" id="x"><br />
        y:<input type="text" id="y"><br />
        <input type="button" value="移动" onclick="move()">
        <script>
            function  move() {
                var x0bj=document.getElementById('x');    //文本框中，要移动的横向位置的对象
                var y0bj=document.getElementById('y');    //文本框中，要移动的纵向位置的对象
                var x =x0bj.value;                          //文本框中，要移动的横向位置，字符型使用typeof  x  看看
                var y =y0bj.value;                          //文本框中，要移动的纵向位置，字符型

                var boll0bj =document.getElementById('boll');  //小球对象
                console.log(boll0bj.style.left);        //小球的left测试
                console.log(boll0bj.style.top);         //小球的top测试

                var originLeft =parseInt(boll0bj.style.left);   //小球的left,原来是字符型200px---200  Number
                var originTop =parseInt(boll0bj.style.top);     //小球的top，原来是字符型0px---0  Number
                var destLeft = originLeft+parseInt(x);          //+号是数学中的加法
                var destTop = originTop+parseInt(y);

                boll0bj.style.left =destLeft + 'px';        //+号是字符串连接，赋值给dom对象
                boll0bj.style.top =destTop + 'px';           //+号是字符串连接
            }
        </script>



</body>
</html>
